import React from 'react'
import dayjs from 'dayjs';
import { Button, Form, Input, DatePicker } from 'antd'
import 'dayjs/locale/zh-cn';
import locale from 'antd/es/date-picker/locale/zh_CN';
interface SearchType {
  (searchParams: {key: string, start: string, end: string}): void
}
interface PropType {
  onSearch: SearchType
}
export default function SearchBar(props:PropType) {
  const searchParams = {
    key: '',
    start: '',
    end:''
  }
  const onSearch = (params:any) => {
    searchParams.key = params.key;
    if (params.time) {
      searchParams.start = dayjs(params.time[0]).format('YYYY-MM-DD');
      searchParams.end = dayjs(params.time[1]).format('YYYY-MM-DD')
    }
    props.onSearch(searchParams)
  }
  return (
    <Form layout='inline' onFinish={onSearch}>
        <Form.Item name="key" label="关键字">
          <Input placeholder='请输入关键字'/>
        </Form.Item>
        <Form.Item name="time" label="日期">
            <DatePicker.RangePicker locale={locale}/>
        </Form.Item>
        <Form.Item>
          <Button htmlType='submit'>搜索</Button>
        </Form.Item>
      </Form>
  )
}
